<template>
  <!-- 预警决策主页-在线监测模块 -->
  <div class="online">
    <div class="online-top">
      <div class="online-top-aside">
        <div class="img-left" />
        <div class="text-left">装置总数</div>
      </div>
      <div class="online-top-center">
        <div class="value-aside value" @click="goDevicePage()">{{newdeviceTotal}}</div>
        <div class="total">统计</div>
        <div class="value-aside value" @click="goAlarmPage('null')">{{newabnormalData[0].total}}</div>
      </div>
      <div class="online-top-aside">
        <div class="text-right">告警设备数</div>
        <div class="img-right" />
      </div>
    </div>
    <div class="online-center">
      <div class="online-center-aside">
        <div class="online-center-aside-item">主变</div>
        <div class="online-center-aside-item">组合电器</div>
      </div>
      <div class="online-center-center">
        <div class="online-center-center-item value" @click="goAlarmPage('0301')">{{newabnormalData[0].zb}}</div>
        <div class="online-center-center-item value" @click="goAlarmPage('0321')">{{newabnormalData[0].zhdq}}</div>
      </div>
      <div class="online-center-title">
        <div class="online-center-title-item">告警</div>
        <div class="online-center-title-item">设备数</div>
      </div>
      <div class="online-center-center">
        <div class="online-center-center-item value" @click="goAlarmPage('0318')">{{newabnormalData[0].blq}}</div>
        <div class="online-center-center-item value" @click="goAlarmPage('0322')">{{newabnormalData[0].kgg}}</div>
      </div>
      <div class="online-center-aside">
        <div class="online-center-aside-item">避雷器</div>
        <div class="online-center-aside-item">开关柜</div>
      </div>
    </div>
    <div class="online-bottom"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
//loadsh
import lodash from "lodash";
@Component
export default class extends Vue {
  // 当前地市信息
  @Prop({ default: () => [] })
  CurrentOrg;
  // 地市名
  @Prop({ default: () => [] })
  dzLoginName;
  // 在线监测装备总数
  @Prop({ default: () => [] })
  deviceTotal;
  // 在线监测异常装备数据
  @Prop({ default: () => [] })
  abnormalData;

  get newCurrentOrg() {
    let CurrentOrg = this.CurrentOrg;
    return CurrentOrg;
  }

  get newdzLoginName() {
    let dzLoginName = this.dzLoginName;
    return dzLoginName;
  }

  get newdeviceTotal() {
    let deviceTotal = this.deviceTotal;
    console.log("在线监测装置总数", deviceTotal)
    return deviceTotal;
  }

  get newabnormalData() {
    let abnormalData = this.abnormalData;
    console.log("在线监测主页告警设备数",abnormalData)
    return abnormalData;
  }

  // 装置总数跳转页面
  private goDevicePage() {
    // let url = "http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_zxjc/yczz.jsp?ssds=";
    // if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
    //   //省公司
    //   window.open(url + null + "&zzzt=null&yxzt=1");
    // } else {
    //   //地市公司
    //   window.open(url + this.newCurrentOrg.SSDSMC + "&zzzt=null&yxzt=1");
    // }

    // iframe嵌套
    let list = "";
    if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
      //省公司
      list = "ssds=" + null + "&zzzt=null&yxzt=1";
    } else {
      //地市公司
      list = "ssds=" + this.newCurrentOrg.SSDSMC + "&zzzt=null&yxzt=1";
    }
    let url="http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_zxjc/yczz.jsp?" +
          list
     window.open(url, "_blank")
    // this.$router.push({
    //   path: "xyddjc",
    //   query: {
    //     list: list,
    //     urlType:'yczz'
    //   },
    // });
  }

  // 告警设备数/主变异常/避雷器异常/组合电器/开关柜跳转页面
  private goAlarmPage(tail: string) {
    // let url = "http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_zxjc/ycsb.jsp?ssds=";
    // if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
    //   //省公司
    //   window.open(url + null + "&sblx=" + tail + "&sbzt=02&jczt=01");
    // } else {
    //   //地市公司
    //   window.open(url + this.newCurrentOrg.SSDSMC + "&sblx=" + tail + "&sbzt=02&jczt=01");
    // }

    // iframe嵌套
    let list = "";
    if (this.newCurrentOrg.SSDSBM == "8a1ea5c64bdebad1014bdebc4cbf0001") {
      //省公司
      list = "ssds=" + null + "&sblx=" + tail + "&sbzt=02&jczt=01";
    } else {
      //地市公司
      list = "ssds=" + this.newCurrentOrg.SSDSMC + "&sblx=" + tail + "&sbzt=02&jczt=01";
    }

    let url= "http://10.193.23.21:28883/epribigdata/jsp/tg_zt/xinyi_zxjc/ycsb.jsp?" +
          list;
     window.open(url, "_blank")
    // this.$router.push({
    //   path: "xyddjc",
    //   query: {
    //     list: list,
    //     urlType:'ycsb'
    //   },
    // });
  }


}
</script>

<style lang="scss" scoped>
.online {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 9%;
  &-top {
    width: 5.89rem;
    height: 0.63rem;
    // margin-top: 9%;
    background-image: url("../../../../assets/img/WarningToSolve/warning_bg1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.12rem;
    &-aside {
      width: 23%;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-center {
      flex: 1;
      display: flex;
      align-items: center;
      text-align: center;
      .value-aside {
        width: 40%;
        // background-color: gray;
        // 超出显示省略号
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
      .total {
        flex: 1;
        // background-color: pink;
        font-size: 0.2rem;
      }
    }
    .img-left {
      width: 0.27rem;
      height: 0.26rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .img-right {
      width: 0.26rem;
      height: 0.26rem;
      background-image: url("../../../../assets/img/WarningToSolve/warning_2.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  &-center {
    width: 5.16rem;
    height: 1.93rem;
    margin-top: 7%;
    background-image: url("../../../../assets/img/WarningToSolve/warning_bg2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    font-size: 0.18rem;
    &-aside {
      width: 100%;
      height: 17%;
      // background-color: pink;
      // opacity: 0.5;
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      &-item {
        width: 30%;
      }
    }
    &-center {
      width: 100%;
      height: 17%;
      // background-color: gray;
      // opacity: 0.5;
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      &-item {
        width: 50%;
      }
    }
    &-title {
      flex: 1;
      width: 100%;
      padding-top: 1%;
      // background-color: pink;
      display: flex;
      flex-direction: column;
      &-item {
        margin: 0 auto;
        color: #fd9f15;
      }
    }
  }
  &-bottom {
    width: 3.95rem;
    height: 0.99rem;
    margin-top: -2%;
    background-image: url("../../../../assets/img/WarningToSolve/warning_bg3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  .value{
    cursor: pointer;
  }
}
</style>


